<template>
	<!-- 小程序顶部提示 -->
	<view>
		<view class="tip_box" :class="{ anScale: isAm }" v-if="showTip" :style="{ top: isCustom ? boxTop + 'px' : '0px' }">
			<view class="arrow" :style="{ 'margin-right': arrowMargin + 'px', borderBottomColor: bgColor }"></view>
			<view class="container" :style="{ 'margin-right': cotainerMargin + 'px', backgroundColor: bgColor, borderRadius: borderR + 'px' }">
				<!-- 提示文字 -->
				<view class="tips" :style="{ color: fontObj.color, fontSize: fontObj.fontSize, fontWeight: fontObj.fontWeight }">
					{{ text }}
				</view>
				<view class="close" @tap="tipHidden">
					<text class="iconfont icon-cha3" v-if="closeColor"></text>
					<text class="iconfont icon-cha3" style="color: #fff" v-else></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showTip: false,
			boxTop: 0,
			arrowMargin: 0,
			cotainerMargin: 0,
			screenWidth: 0
		};
	},
	props: {
		/* 是否是自定义头部 */
		isCustom: {
			type: Boolean,
			default: false
		},
		/* 背景颜色 */
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		/* 提示文字 */
		text: {
			type: String,
			default: '添加到我的小程序'
		},
		/* 提示文字样式 */
		fontObj: {
			type: Object,
			default: function () {
				return {
					color: '#202020',
					fontSize: '12px',
					fontWeight: '0'
				};
			}
		},
		/* 圆角大小  px*/
		borderR: {
			type: Number,
			default: 5
		},
		/* 延时出现 */
		delay: {
			type: Number,
			default: 2000
		},
		/* 关闭btn黑白两色 或者自行添加 */
		closeColor: {
			type: Boolean,
			default: true
		},
		/* 动画效果 */
		isAm: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		tipHidden: function () {
			uni.setStorageSync('my_tips_2020', 'true');
			this.showTip = false;
		},
		timeOut() {
			this.tipHidden();
			this.showTip = true;
		},
		init() {
			if (uni.getStorageSync('my_tips_2020')) return;
			let rect = uni.getMenuButtonBoundingClientRect();
			let screenWidth = uni.getSystemInfoSync().screenWidth;
			this.boxTop = rect.bottom;
			this.arrowMargin = rect.width * 0.75 + 4;
			this.cotainerMargin = screenWidth - rect.right;
			this.timeOut();
		}
	},
	onReady() {
		this.init();
	}
};
</script>

<style lang="scss" scoped>
@keyframes anScale {
	from {
		-webkit-transform: scale3d(0.96, 0.96, 0.96);
		transform: scale3d(0.96, 0.96, 0.96);
	}

	50% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	to {
		-webkit-transform: scale3d(0.96, 0.96, 0.96);
		transform: scale3d(0.96, 0.96, 0.96);
	}
}

.anScale {
	animation: anScale 1s linear infinite;
}

.tip_box {
	width: 70%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;

	.arrow {
		width: 0;
		height: 0;
		border: 10rpx solid;
		border-color: transparent;
	}

	.container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16rpx 24rpx;

		.tips {
			flex: 1;
			padding-right: 12rpx;
		}

		.close {
			height: 30rpx;
			width: 30rpx;
			font-size: 20rpx;
			line-height: 30rpx;
			color: #999;
			.closeImg {
				height: 100%;
				width: 100%;
			}
		}
	}
}
</style>
